import Vue from "vue";
import Vuex from "vuex"
//1.应用Vuex
Vue.use(Vuex)

//2.实例化Vuex仓库
const store=new Vuex.Store({
    //数据,state的值必须是一个对象!!!! 对象中保存我们想要的数据
    state:{
        num:4
    },
    getters:{
        doubleNum(state){
            //vuex中计算属性的参数就是当前store的state数据
            return state.num*2
        }
    },
    // mutations:修改state数据的唯一来源
    //mutations的第一个参数是当前store的state对象，修改state的时候要遵守响应式数据改动规则(vuex响应式原理其实是在vuex内部也new Vue,数据放在vm上)
    mutations:{
    //每次加1
        increment(state){
            state.num++
        },
        // 每次加n
        incrementN(state,{n}){
            state.num+=n
        },
        // //每次异步加n,也可以修改,但是devTools无法跟踪状态
        // incrementN(state,{n}){
        //     setTimeout(()=>{
        //         state.num+=n
        //     })
        // }
    },
    actions:{
        
    }
})

//3.暴露store给入口文件
export default store